<template>
	<view>
		<view>
			<uni-search-bar bgColor="white" placeholder="请输入社团名" @confirm="search" @cancel="reset" @clear="reset">
			</uni-search-bar>
			<!-- 条件选择器 -->
			<view>
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#4cd964"></uni-segmented-control>
			</view>
			<!-- 社团列表 -->
			<view style="margin-top: 40rpx;" v-for="(org,index) in organizationList" :key="index">
				<view @click="navigateToDetail(org.organId)" style="display: flex;justify-content: center;">
					<view
						style="display: flex;justify-content: space-around;width: 92%;border-bottom: 1rpx solid #C0C0C0;">
						<view style="width: 65%">
							<view style="font-weight: bolder">{{org.organName}}</view>
							<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">
								申请人：{{org.orgMinisterName}}
							</view>
							<view style="color: #808080;margin-top: 20rpx;font-size: small;overflow: hidden;">
								{{org.organIntroduction}}
							</view>
						</view>
						<view style="width: 30%;display: flex;justify-content: center;align-items: center;">
							<view>
								<img style="width:200rpx;height: 160rpx;" :src="org.organAvatar" alt="社团封面">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 社团列表
				organizationList: null,
				// 请求参数
				orgRequest: {
					"name": null,
					"pageNo": 1,
					"pageSize": 10,
					"sortBy": 1,
					"status": "undetermined"
				},
				// 分段器
				items: ['创建申请', '注销申请'],
				current: 0
			}
		},
		onLoad() {
			// 获取社团列表
			this.getOrgList()
		},
		onShow() {
			// 获取社团列表
			this.getOrgList()
		},
		// 页面下拉到底部
		onReachBottom() {
			// 当前页+1
			this.orgRequest.pageNo = this.orgRequest.pageNo + 1
			// 继续获取数据
			this.$http.request({
				url: '/organizations/web/organization/page',
				method: 'POST',
				data: this.orgRequest
			}).then(res => {
				res = res.data;
				if (res.result) {
					this.organizationList = [
						...this.organizationList,
						...res.data
					]
				} else {
					uni.showToast({
						title: '获取社团列表失败',
						mask: true,
						duration: 2000,
						icon: 'none'
					})
				}

			})
		},
		// 监听下拉刷新动作
		onPullDownRefresh() {
			// 重新获取数据
			this.orgRequest.name = null;
			this.orgRequest.pageNo = 1;
			this.getOrgList()
			// 结束下拉刷新
			setTimeout(function() {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 清除
			reset() {
				this.orgRequest.name = null;
				this.orgRequest.pageNo = 1;
				this.getOrgList()
			},
			// 跳转到详情页
			navigateToDetail(orgId) {
				uni.navigateTo({
					url: './applyOrgDetail?orgId=' + orgId
				})
			},
			// 分段器
			onClickItem(index) {
				this.orgRequest.name = null;
				if (index.currentIndex == 0) {
					this.orgRequest.status = "undetermined";
				} else {
					this.orgRequest.status = "cancel";
				}
				if (this.current !== index.currentIndex) {
					this.current = index.currentIndex;
				}
				// 重新获取
				this.orgRequest.pageNo = 1;
				this.getOrgList()
			},
			// 搜索
			search(res) {
				// 设置值
				this.orgRequest.pageNo = 1;
				this.orgRequest.name = res.value
				// 重新获取值
				this.getOrgList()
			},
			// 获取社团列表
			getOrgList() {
				this.$http.request({
					url: '/organizations/web/organization/page',
					method: 'POST',
					data: this.orgRequest
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.organizationList = res.data
					} else {
						uni.showToast({
							title: '获取社团列表失败',
							mask: true,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
